マウスが乗ったらチェックボックスの色を変更する

チェックボックスの色を変更するには、あらかじめINPUTタブにスタイルシートを追加しておく必要があります。まずは、スタイルシート「background-color」を利用して、チェックボックスの背景色の初期値を指定してください。 なお、色の指定は『RGBの16進数指定』または『色の名前』により指定できます。 <INPUT type="checkbox" name="check1" style="background-color:#ffffff"> <LABEL for="check1">読書    </LABEL> <INPUT type="checkbox" name="check2" style="background-color:#ffffff"> <LABEL for="check2">映画鑑賞    </LABEL> <INPUT type="checkbox" name="check3" style="background-color:#ffffff"> <LABEL for="check3">スポーツ観戦</LABEL>

続いて、マウスポインタがチェックボックス上に来たときの色を「onMouseover」イベントを使って指定します。ただし、ここでの記述はJavaScriptとなるため「オブジェクト名.style.backgroundColor:（色の指定）」という書式でチェックボックスの色を指定するようにしてください。 <INPUT type="checkbox" name="check1" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'"> <LABEL for="check1">読書    </LABEL> <INPUT type="checkbox" name="check2" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'"> <LABEL for="check2">映画鑑賞    </LABEL> <INPUT type="checkbox" name="check3" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'"> <LABEL for="check3">スポーツ観戦</LABEL>

ここまでの手順だけでは、マウスポインタがチェックボックスの外に移動したとき、『チェックボックスの色が変更されたまま』となってしまいます。チェックボックスの色が元の色に戻るように「onMouseout」イベントを追加しておきましょう（この書式は、先ほどのonMouseoverイベントと同じです）。以上で、マウスポインタの位置によりチェックボックスの色を変更できるようになります。 <INPUT type="checkbox" name="check1" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'" onMouseout ="this.style.backgroundColor='#ffffff'"> <LABEL for="check1">読書    </LABEL> <INPUT type="checkbox" name="check2" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'" onMouseout ="this.style.backgroundColor='#ffffff'"> <LABEL for="check2">映画鑑賞    </LABEL> <INPUT type="checkbox" name="check3" style="background-color:#ffffff" onMouseover="this.style.backgroundColor='#ff0000'" onMouseout ="this.style.backgroundColor='#ffffff'"> <LABEL for="check3">スポーツ観戦</LABEL>

G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I